<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./images/login/favicon.ico" />
    <link rel="stylesheet" href="./css/vivo/iconfont.css">
    <link rel="stylesheet" href="./css/css.css">
    <link rel="stylesheet" href="./css/home.css">
    <link rel="stylesheet" href="./css/detail.css">
    <title>详情页</title>
</head>


<body>
    <!-- 开头导航栏部分 -->
    <div class="navigation-top">
        <!-- 开头导航栏版心 -->
        <div class="navigation-center">
            <ul class="navigation-bar">
                <a href="">
                    <li>品牌</li>
                </a>
                <a href="">
                    <li>OriginOS</li>
                </a>
                <a href="">
                    <li>体验店</li>
                </a>
                <a href="">
                    <li>企业业务</li>
                </a>
                <a href="">
                    <li>社区</li>
                </a>
                <a href="">
                    <!-- 点击这个出现弹窗 -->
                    <li><span class="iconfont APP">&#xe617;&nbsp;&nbsp;APP下载</span></li>
                </a>
                <!-- 弹窗 -->
                <div class="popUp">
                    <div class="triangle"></div>
                    <img src="./images/login/qr code.png" alt="">
                    <p>扫描下载vivio官方APP</p>
                </div>
                <a href="cart.html">
                    <li>购物车</li>
                </a>
                <a href="">
                    <li class="personal">个人中心</li>
                </a>
                <div class="popUp2">
                    <div class="triangle2"></div>
                    <div><a href="./login.html">登录</a></div>
                    <p><a href="./register.html">注册</a></p>
                </div>
            </ul>
        </div>
    </div>
    <!-- 导航栏链接部分 -->
    <div class="navigation-button">
        <a href="">
            <b class="iconfont">&#xe69a;</b>
        </a>
        <ul class="navigation-button-cenent">
            <a href="">
                <li>NEX系列</li>
            </a>
            <a href="">
                <li>X系列</li>
            </a>
            <a href="">
                <li>S系列</li>
            </a>
            <a href="">
                <li>Y系列</li>
            </a>
            <a href="">
                <li>iQOO手机</li>
            </a>
            <a href="">
                <li>智能硬件</li>
            </a>
            <a href="">
                <li>商城</li>
            </a>
            <a href="">
                <li>服务</li>
            </a>
        </ul>
        <div class="iconfont">
            &#xe632;
        </div>
    </div>
    <div class="drop-box"></div>
    <!-- 详情页主体部分 -->
    <div class="detail-body">
        <!-- 详情菜单 -->
        <div class="detail-title">
            <ul>
                <li><a href="./home.html">商城首页</a></li>
                <li class="iconfont">&#xe7e6;</li>
                <li><a href="./list.html">智能手机</a></li>
                <li class="iconfont">&#xe7e6;</li>
                <li></li>
            </ul>
        </div>
        <!-- 中间展示区 -->
        <div class="show">
            <!-- 左侧图片展示区 -->
            <dl class="show-img">
                <!-- 图片放大区 -->
                <div class="show-box">
                    <img src="" alt="">
                </div>
                <!-- 图片展示 -->
                <dt><img src="https://shopstatic.vivo.com.cn/vivoshop/commodity/13/10006413_1619661885986_750x750.png.webp"
                        alt="">
                        <!-- 遮罩 -->
                    <div class="shade"></div>
                </dt>
                
                <dd><img src="https://shopstatic.vivo.com.cn/vivoshop/commodity/13/10006413_1619661886321_750x750.png.webp"
                        alt=""></dd>
                <dd><img src="https://shopstatic.vivo.com.cn/vivoshop/commodity/13/10006413_1619661885315_750x750.png.webp"
                        alt=""></dd>
                <dd><img src="https://shopstatic.vivo.com.cn/vivoshop/commodity/13/10006413_1619661885986_750x750.png.webp"
                        alt=""></dd>
                <dd><img src="https://shopstatic.vivo.com.cn/vivoshop/commodity/13/10006413_1619661885487_250x250.png.webp"
                        alt=""></dd>
                <span></span>
            </dl>
            <!-- 右侧文字区 -->
            <ul class="show-title">
                <h1>vivo Y52s (t1版) 5G版 8GB+256GB 珊瑚海</h1>
                <p>
                    <span>
                        【普通会员用户购机赠XE710耳机】
                    </span>
                    <em>4800万后置影像系统|5000mAh大电池+18W双引擎闪充|90Hz灵动护眼屏</em>
                </p>
                <!-- 价格 -->
                <div class="price">
                    <span>
                        <b>￥</b>
                        <em>2099.00</em>
                    </span>
                    <ol>
                        <li><em>满减</em> 满200元减10元</li>
                        <li><em>积分</em> 购物送积分</li>
                    </ol>
                </div>
                <!-- 商品支持 -->
                <ol class="approach">
                    <li>商品支持：</li>
                    <li class="iconfont">&#xe612; 花呗分期</li>
                    <li class="iconfont">&#xe612; 以旧换新</li>
                    <li class="iconfont">&#xe612; 积分抵现</li>
                </ol>
                <!-- 版本 -->
                <dl class="verisons">
                    <dt>版本</dt>
                    <button>5G版+256GB</button>
                </dl>
                <!-- 颜色 -->
                <dl class="col">
                    <dt>颜色</dt>
                    <button>太空灰</button>
                    <button>莫奈彩</button>
                    <button name=chek>珊瑚海</button>
                </dl>
                <!-- 手机服务 -->
                <dl class="server">
                    <dt>手机服务(可选) <a href="">详情</a> </dt>
                    <button>一年碎屏宝——129元 ￥129 <input check=1 type="radio" name="server" ></button>
                    <button>一年延保 ￥129<input check=3 type="radio" name="server"> </button>
                    <button>半年延保 ￥69 <input check=2 type="radio" name="server"> </button>

                    <dd><input type="checkbox">我已阅读并同意<a href="">《vivo服务条款》</a></dd>
                </dl>
                <!-- 数量 -->
                <dl class="number">
                    <dt>数量 </dt>
                    <button>-</button>
                    <span>1</span>
                    <button>+</button>
                    <b>(仅限购物5件)</b>
                </dl>
                <!-- 分期付款 -->
                <dl class="payment">
                    <dt>分期付款 </dt>
                    <button>￥669.66*3期免息<input check=5 type="radio" name="payment"></button>
                    <button>￥669.66*3期免息<input check=6 type="radio" name="payment"> </button>
                    <button>￥669.66*3期免息 <input check=7 type="radio" name="payment"> </button>
                    <button>￥669.66*3期免息<input check=8 type="radio" name="payment"> </button>
                </dl>
                <!-- 最终结果 -->
                <ol class="result">
                    <li>￥ 2099</li>
                    <li>已选：</li>
                    <li>5G版 8GB+256GB</li>
                    <li>珊瑚海</li>
                    <b class="num">1</b>件
                    <!-- 按钮 -->
                </ol>
                <!-- 按钮 -->
                <div class="button">
                    <button class="cart">加入购物车</button>
                    <button class="buy-cart">立刻购买</button>
                </div>


            </ul>
        </div>

    </div>
    <!-- 同类推荐 -->
    <div class="recommend-title">
        同类推荐
    </div>
    <ul class="recommend">
        <li>
            <a href=""><img
                    src="https://shopstatic.vivo.com.cn/vivoshop/commodity/86/10006086_1608876743113_250x250.png.webp"
                    alt=""></a>
            <p>vivo Y52s 5G版 8GB+128GB 莫奈彩 </p>
            <p>￥1798</p>
        </li>
        <li>
            <a href=""><img
                    src="https://shopstatic.vivo.com.cn/vivoshop/commodity/86/10006086_1608876743113_250x250.png.webp"
                    alt=""></a>
            <p>vivo Y52s 5G版 8GB+128GB 莫奈彩 </p>
            <p>￥1798</p>
        </li>
        <li>
            <a href=""><img
                    src="https://shopstatic.vivo.com.cn/vivoshop/commodity/86/10006086_1608876743113_250x250.png.webp"
                    alt=""></a>
            <p>vivo Y52s 5G版 8GB+128GB 莫奈彩 </p>
            <p>￥1798</p>
        </li>
        <li>
            <a href=""><img
                    src="https://shopstatic.vivo.com.cn/vivoshop/commodity/86/10006086_1608876743113_250x250.png.webp"
                    alt=""></a>
            <p>vivo Y52s 5G版 8GB+128GB 莫奈彩 </p>
            <p>￥1798</p>
        </li>
    </ul>
    <!-- 尾部 -->
    <div class="foot-top">
        <ul>
            <li> <span class="iconfont">&#xe640;</span>官方正品</li>
            <li> <span class="iconfont">&#xe6bf;</span>顺丰极速达</li>
            <li> <span class="iconfont">&#xe62a;</span>全国联保</li>
            <li> <span class="iconfont">&#xe61a;</span>免费制定</li>
        </ul>
    </div>
    <div class="foot-botton">
        <div class="foot-botton-body">
            <ul>
                <li>
                    <dt>热门链接</dt>
                    <dd><a href="">X60 Pro</a></dd>
                    <dd><a href="">S9</a></dd>
                    <dd><a href="">NEX 3S</a></dd>
                    <dd><a href="">vivo摄影</a></dd>
                    <dd><a href="">查找手机</a></dd>
                    <dd><a href="">常见问题</a></dd>
                </li>
                <li>
                    <dt>在线购买</dt>
                    <dd><a href="">官方商城</a></dd>
                    <dd><a href="">选购手机</a></dd>
                    <dd><a href="">选购配件</a></dd>
                    <dd><a href="">企业服务</a></dd>
                    <dd><a href="">以旧换新</a></dd>
                    <dd><a href="">保障服务</a></dd>
                </li>
                <li>
                    <dt>服务支持</dt>
                    <dd><a href="">体验店</a></dd>
                    <dd><a href="">服务首页</a></dd>
                    <dd><a href="">服务网点查询</a></dd>
                    <dd><a href="">真伪查询</a></dd>
                    <dd><a href="">预约维修</a></dd>
                    <dd><a href="">维修配件价格</a></dd>
                    <dd><a href="">服务政策</a></dd>
                    <dd><a href="">安全公告</a></dd>
                    <dd><a href="">环保回收</a></dd>
                </li>
                <li>
                    <dt>vivo社区</dt>
                    <dd><a href="">社区首页</a></dd>
                    <dd><a href="">摄影专区</a></dd>
                    <dd><a href="">新浪微博</a></dd>
                    <dd><a href="">百度贴吧</a></dd>
                    <dd><a href="">兴趣部落</a></dd>
                </li>
                <li>
                    <dt>关于vivo</dt>
                    <dd><a href="">vivo简介</a></dd>
                    <dd><a href="">工作机会</a></dd>
                    <dd><a href="">新闻资讯</a></dd>
                    <dd><a href="">采购平台</a></dd>
                    <dd><a href=""> 供应商协同平台</a></dd>
                    <dd><a href=""> 开发平台</a></dd>
                    <dd><a href=""> 廉政合规</a></dd>
                </li>
            </ul>
            <ol class="foot-botton-rg">
                <a href=""><span class="iconfont">&#xe60f;</span>在线客服</a>
                <p><span class="iconfont">&#xe66e;</span>全国客户服务热线 7*24小时</p>
                <b>400-678-9688</b>
                <p><span class="iconfont">&#xe62d;</span>NEX专属服务热线 7*24小时</p>
                <b>400-678-9688</b>
                <p><span class="iconfont">&#xe608;</span>服务监督邮箱</p>
                <em>vivo@vivo.com</em>
                <p><span class="iconfont">&#xe673;</span>关注vivo</p>
                <ol>
                    <a href="">
                        <li class="iconfont">&#xe618;</li>
                    </a>
                    <a href="">
                        <li class="iconfont">&#xe7e5;</li>
                    </a>
                    <a href="">
                        <li class="iconfont">&#xe63b;</li>
                    </a>
                    <a href="">
                        <li class="iconfont">&#xe649;</li>
                    </a>
                </ol>
            </ol>
        </div>

        <div class="foot-botton-foot">
            ©2011-2021 广东天宸网络科技有限公司版权所有 | 隐私政策 | 法律声明 | 营业执照 | 粤B2-20150324 | 粤ICP备14052990号| 粤公网安备 44190002004246号
            <span>Select Location <em class="iconfont">&#xe670;</em></span>
        </div>

</body>
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script src="./layer/layer.js"></script>
<script src="./js/cookie.js"></script>
<!-- 六个页面动态效果一样的，都放入其中 -->
<script src="./js/js.js"></script>
<script src="./js/detail.js?a=10"></script>
<script>
    //页面卷曲高度到达一定比例，左侧展示图片，保持窗口静止
    var img = document.querySelector('.show-img')
    scroll(img)
</script>

</html>